<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="icon" href="https://static.nowcoder.com/images/logo_87_87.png"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" th:href="@{/css/global.css}" />
	<title>牛客网-数据统计</title>
</head>
<body>
	<div class="nk-container">
        <!-- 头部 -->
        <div th:replace="~{common/commons::topbar}"></div>

		<!-- 内容 -->
		<div class="main">
			<!-- 网站UV -->
			<div class="container pl-5 pr-5 pt-3 pb-3 mt-3">
				<h6 class="mt-3"><b class="square"></b> 网站 UV</h6>
				<form class="form-inline mt-3">
					<input type="date" class="form-control" id="uvStart" required/>
					<input type="date" class="form-control ml-3" id="uvEnd" required/>
					<button type="button" id="uvBtn" class="btn btn-primary ml-3">开始统计</button>
				</form>
				<ul class="list-group mt-3 mb-3">
					<li class="list-group-item d-flex justify-content-between align-items-center">
						统计结果
						<span id="uvCount" class="badge badge-primary badge-danger font-size-14">0</span>
					</li>
				</ul>
			</div>
			<!-- 活跃用户 -->
			<div class="container pl-5 pr-5 pt-3 pb-3 mt-4">
				<h6 class="mt-3"><b class="square"></b> 活跃用户</h6>
				<form class="form-inline mt-3">
					<input type="date" class="form-control" id="dauStart" required/>
					<input type="date" class="form-control ml-3" id="dauEnd" required/>
					<button type="button" class="btn btn-primary ml-3" id="dauBtn">开始统计</button>
				</form>
				<ul class="list-group mt-3 mb-3">
					<li class="list-group-item d-flex justify-content-between align-items-center">
						统计结果
						<span id="dauCount" class="badge badge-primary badge-danger font-size-14">0</span>
					</li>
				</ul>
			</div>
		</div>

        <!-- 尾部 -->
        <div th:replace="~{common/commons::buttom}"></div>
	</div>

    <script th:src="@{/js/jquery.js}"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    <script th:src="@{/js/global.js}"></script>
    <script>
        $(function () {
            $("#uvBtn").click(function () {
                var uvStart = $("#uvStart").val();
                var uvEnd = $("#uvEnd").val();
                $.post(
                    CONTEXT_PATH + "/data/uv",
                    {
                        start: uvStart,
                        end: uvEnd
                    },
                    function (data) {
                        if (data.code === 200) {
                            $("#uvCount").text(data.data)
                        } else {
                            alert(data.msg)
                        }
                    }
                )
            })
        })
        $(function () {
            $("#dauBtn").click(function () {
                var dauStart = $("#dauStart").val();
                var dauEnd = $("#dauEnd").val();
                $.post(
                    CONTEXT_PATH + "/data/dau",
                    {
                        start: dauStart,
                        end: dauEnd
                    },
                    function (data) {
                        if (data.code === 200) {
                            $("#dauCount").text(data.data)
                        } else {
                            alert(data.msg)
                        }
                    }
                )
            })
        })
    </script>
</body>
</html>
